<!-- 流程实例弹窗 -->
<template>
  <BasicModal
    v-bind="$attrs"
    title="流程实例"
    @register="register"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :width="1200"
  >
    <Row>
      <Col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <!-- 流程信息 -->
        <BasicForm @register="registerForm" />
      </Col>
    </Row>
    <Row :gutter="12">
      <Col :span="6" :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <!-- 对象信息 -->
        <BasicTree
          :treeData="fileList"
          :replaceFields="{ key: 'oid', title: 'filename' }"
          @select="setSelectedKeys"
        />
      </Col>
      <Col :span="18" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
        <!-- 流程步骤信息 -->
        <BasicTable @register="registerTable" />
      </Col>
    </Row>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicTree } from '/@/components/Tree/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getDocProcessForm, getFlowDetailColumns } from './data';
  import { flowDetailApi } from '/@/api/demo/flow';

  const isFirst = ref<boolean>(true); // 是否第一次打开弹窗
  const oid = ref<string>(''); // 对象id
  const fileList = ref<any[]>([]); // 文件列表
  const wfInsId = ref<string>(''); // 流程实例id

  // 提交
  const handleSubmit = () => {
    closeModal();
  };

  // 取消
  const handleCancel = () => {
    isFirst.value = true;
    oid.value = '';
    fileList.value = [];
    wfInsId.value = '';
    closeModal();
  };

  // 对象选择
  const setSelectedKeys = (keys) => {
    isFirst.value = false;
    oid.value = keys[0];
    getDataList();
  };

  // 接口调用
  const getDataList = async () => {
    const fetchFlowDetails = async (params) => {
      const res = await flowDetailApi(params);
      if (res) {
        setFieldsValue(res);
        setTableData(res.steplist);
        fileList.value = res.filelist;
      }
      return res;
    };

    const params = {
      StepInsId: '',
      WfInsId: wfInsId.value,
      OId: oid.value,
    };

    if (isFirst.value) {
      const initialRes = await fetchFlowDetails(params);
      if (initialRes?.filelist?.length) {
        oid.value = initialRes.filelist[0].oid;
        const updatedParams = { ...params, OId: oid.value };
        await fetchFlowDetails(updatedParams);
      }
    } else {
      await fetchFlowDetails(params);
    }
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    wfInsId.value = data.wfInsId;
    getDataList();
  });

  // 初始化表单
  const [registerForm, { setFieldsValue }] = useForm({
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
    schemas: getDocProcessForm(),
    showActionButtonGroup: false,
  });

  // 初始化表格
  const [registerTable, { setTableData }] = useTable({
    columns: getFlowDetailColumns(),
    showIndexColumn: false,
    showTableSetting: false, // 表格设置工具配置
    bordered: true,
    canResize: false,
  });
</script>
